<script setup>
import { Head, Link, router } from '@inertiajs/vue3'
import AdminLayout from '@/Layouts/AdminLayout.vue'
import { computed, ref } from 'vue'
import { diffChars } from 'diff'
import { 
    ArrowLeftIcon,
    ClockIcon,
    ArrowPathIcon,
    DocumentTextIcon,
    UserIcon,
    EyeIcon
} from '@heroicons/vue/24/outline'
import { useToast } from '@/Composables/useToast'
import ConfirmDialog from '@/Components/UI/ConfirmDialog.vue'

const props = defineProps({
    post: {
        type: Object,
        required: true
    },
    revision: {
        type: Object,
        required: true
    }
})

const toast = useToast()
const showRestoreConfirm = ref(false)

const differences = computed(() => {
    return diffChars(props.revision.content, props.post.current_content)
})

// 格式化日期
const formatDate = (date) => {
    if (!date) return '未知'
    return new Date(date).toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
    })
}

// 确认恢复
const confirmRestore = () => {
    showRestoreConfirm.value = true
}

// 执行恢复
const restoreRevision = () => {
    router.post(route('admin.posts.revisions.restore', [props.post.slug, props.revision.id]), {
        onSuccess: () => {
            toast.success('版本恢复成功！')
            showRestoreConfirm.value = false
        },
        onError: (errors) => {
            console.error('恢复失败：', errors)
            const errorMessage = errors?.error || errors?.message || '恢复失败，请重试'
            toast.error(errorMessage)
        }
    })
}

// 取消恢复
const cancelRestore = () => {
    showRestoreConfirm.value = false
}
</script>

<template>
    <AdminLayout>
        <Head :title="`${post.title} - 版本对比`" />

        <div class="space-y-6">
            <!-- 页面头部 -->
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-x-4">
                    <Link
                        :href="route('admin.posts.revisions.index', post.slug)"
                        class="inline-flex items-center rounded-md p-2 text-gray-400 hover:text-gray-500 hover:bg-gray-100 transition-colors"
                    >
                        <ArrowLeftIcon class="h-5 w-5" />
                        <span class="sr-only">返回</span>
                    </Link>
                    <div>
                        <h1 class="text-3xl font-bold text-gray-900">版本对比</h1>
                        <p class="mt-2 text-sm text-gray-600">
                            {{ post.title }}
                        </p>
                    </div>
                </div>
                <button
                    @click="confirmRestore"
                    class="inline-flex items-center gap-x-2 rounded-md bg-orange-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-500"
                >
                    <ArrowPathIcon class="h-5 w-5" />
                    恢复此版本
                </button>
            </div>

            <!-- 版本信息 -->
            <div class="bg-white rounded-lg border border-gray-200 shadow-sm">
                <div class="px-6 py-4 border-b border-gray-200">
                    <div class="flex items-center gap-x-3">
                        <div class="h-10 w-10 rounded-lg bg-orange-100 flex items-center justify-center">
                            <DocumentTextIcon class="h-6 w-6 text-orange-600" />
                        </div>
                        <div>
                            <h2 class="text-lg font-semibold text-gray-900">版本信息</h2>
                            <p class="mt-1 text-sm text-gray-600">查看版本详情和差异对比</p>
                        </div>
                    </div>
                </div>
                <div class="p-6">
                    <div class="flex items-center gap-x-4 mb-6">
                        <div class="h-12 w-12 flex-shrink-0">
                            <div v-if="revision.user?.avatar" class="h-12 w-12 rounded-full overflow-hidden">
                                <img
                                    :src="revision.user.avatar"
                                    :alt="revision.user.name"
                                    class="h-full w-full object-cover"
                                >
                            </div>
                            <div v-else class="h-12 w-12 rounded-full bg-orange-100 flex items-center justify-center">
                                <UserIcon class="h-8 w-8 text-orange-600" />
                            </div>
                        </div>
                        <div class="min-w-0 flex-1">
                            <p class="text-sm font-medium text-gray-900">
                                {{ revision.user?.name || '未知用户' }}
                            </p>
                            <div class="mt-1 flex items-center gap-x-2 text-sm text-gray-500">
                                <ClockIcon class="h-4 w-4" />
                                <span>{{ revision.created_at?.human || formatDate(revision.created_at?.formatted) }}</span>
                            </div>
                            <div v-if="revision.reason" class="mt-2">
                                <p class="text-sm text-gray-600">
                                    <span class="font-medium">修改原因：</span>{{ revision.reason }}
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- 差异对比 -->
                    <div class="mt-6">
                        <h3 class="text-sm font-semibold text-gray-900 mb-4">内容差异</h3>
                        <div class="rounded-lg border border-gray-200 bg-gray-50 p-4 max-h-[600px] overflow-y-auto">
                            <div class="font-mono text-sm leading-relaxed whitespace-pre-wrap">
                                <span
                                    v-for="(part, index) in differences"
                                    :key="index"
                                    :class="{
                                        'bg-red-100 text-red-800': part.removed,
                                        'bg-green-100 text-green-800': part.added,
                                        'text-gray-900': !part.removed && !part.added
                                    }"
                                >{{ part.value }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="mt-6 flex items-center justify-end gap-x-3">
                        <Link
                            :href="route('admin.posts.revisions.index', post.slug)"
                            class="inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
                        >
                            <ArrowLeftIcon class="h-4 w-4" />
                            返回列表
                        </Link>
                        <button
                            @click="confirmRestore"
                            class="inline-flex items-center gap-x-1.5 rounded-md bg-orange-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-500"
                        >
                            <ArrowPathIcon class="h-4 w-4" />
                            恢复此版本
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 恢复确认对话框 -->
        <ConfirmDialog
            :show="showRestoreConfirm"
            title="恢复版本"
            content="确定要恢复到此版本吗？当前版本的内容将被替换。"
            confirm-text="恢复"
            cancel-text="取消"
            @confirm="restoreRevision"
            @close="cancelRestore"
        />
    </AdminLayout>
</template> 